<template>
  <div class="article-nav">
    <div class="article-nav-sub">
      <div class="article-nav-sub-log">
        <router-link target="_blank" to="/HomePage" :title="this.$t('workDisplay.head.goIndex')">
          <img src="../../../assets/images/common/logo.png" width="70px" style="margin-top: 8px">
        </router-link>
      </div>
      <div class="article-nav-sub-home" :title="user.userNickname==''? user.userId:user.userNickname">
        <a href="javascript:;" id="home" @mouseover="homeSubShow()" @mouseout="homeSubDisappear()">
          <div class="home" style="background-color: #686868;width: 27px;height: 27px;border-radius: 50%">
            <img id="my" :src=user.userHeadPortrait alt="" width="27px" style="border-radius: 50%;">
            <div class="home-sub" style="display: none;" id="home-sub">
              <div class="home-sub-top"></div>
              <ul>
                <router-link target="_blank" :to="{path:'/userHomePage', query:{ userId : user.userId }}">
                  <li><i class="iconfont icon-gerenzhongxin" style="font-size: 20px"></i> {{$t('workDisplay.head.myIndex')}} </li>
                </router-link>
                <li @click="logout"><i class="iconfont icon-tuichu" style="font-size: 20px"></i> {{$t('workDisplay.head.logout')}}</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ArticleHead",
        data(){
            return{
                user:'',
                baseURL1:'http://localhost:8081/user/query',
                baseURL2:'http://localhost:8081/loginReg/logout',
            }
        },
        mounted(){
            this.getHeadPhoto()
        },
        methods:{
            getHeadPhoto(){
                // 获取头像
                this.axios.post(this.baseURL1).then(res=>{
                    if (res.data!=false){
                        this.user = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            logout(){
                this.axios.post(this.baseURL2).then((res) =>{
                    if (res.data==false){
                        this.failOpt(this.$t('workDisplay.head.logoutFail'))
                    }else {
                        this.$router.push('/loginRegistrationPage/login')
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            homeSubShow() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook_fill"
                document.getElementById("home-sub").style.display="block"
            },
            homeSubDisappear() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook"
                document.getElementById("home-sub").style.display="none"
            },
            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .article-nav{
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #ebebeb;
    background-color: #ffffff;
  }
  .article-nav-sub{
    width: 1100px;
    height: 55px;
    margin: 0 auto;
    position: relative;
    /*background-color: #2f2f2f;*/
  }
  .article-nav-sub div{
    float: left;
  }
  .article-nav-sub-log{
    width: 100px;
    height: 60px;
    line-height: 60px;
  }
  .article-nav-sub-log a strong{
    color: rgb(0, 0, 0);
    font-size: 20px;
  }
  .article-nav-sub-home{
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .home{
    margin-left: 30px;
    margin-top: 16px;
    position: relative;
  }
  .home-sub{
    width: 150px;
    height: 100px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 20px;
    position: absolute;
    top: 23px;
    right: -60px;
    box-shadow: 0px 0px 5px rgb(190, 190, 190) ;
    border-radius: 3px;
  }
  .home-sub-top{
    width: 0px;
    height: 0px;
    border: transparent solid 10px;
    border-bottom: rgb(255, 255, 255) solid 10px;
    position: absolute;
    top: -20px;
    left: 65px;
  }
  .home-sub ul{
    position:absolute;
    top: -10px;
    left: -40px;
  }
  .home-sub li{
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: rgb(63, 63, 63);
  }
  .home-sub li:hover{
    background-color: #fafafa;
  }
  .home-sub li:nth-child(1){
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .home-sub li:nth-child(2){
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }


</style>
